<template>
	<view>
		<input type="text" name="" id="" placeholder="请输入title" v-model="title">
		<button @click="sendFn">发布</button>
		<view class="list">
			<todo-item v-for="(item,index) in arr" :key="item.id" :title="item.title" :completed="item.completed"
				@delClick="delFn(index)" @comChange="comChange($event,item)"></todo-item>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [{
					id: 1,
					title: '你好',
					completed: false
				}, {
					id: 2,
					title: '他好',
					completed: true
				}],
				title: ''

			}
		},
		methods: {
			comChange(evt, item) {
							console.log(evt.detail.value);
							console.log(item);
							item.completed = evt.detail.value
							console.log(this.arr);
						},
			delFn(i) {
				this.arr.splice(i, 1)
				console.log(this.arr)
			},
			sendFn() {
				let obj = {
					id: Date.now(),
					title: this.title,
					completed:false,
				}
				this.arr.push(obj)
				this.title = ''
				console.log(this.arr)
			}
		}
	}
</script>

<style>

</style>